<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小海微博</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-app-capable" content="yes">
    <meta name="apple-mobile-app-status-bar-style" content="black">

    <meta name="description" content="一只叫做小海的阿宅，想成为家喻户晓的大侠">
    <meta name="keywords" content="二次元，宅属性，前端，编程，全栈，视频，设计">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="cononico">
    <meta name="application-name" content="Cononico" >

    <link rel="shortcut icon"  type="image/x-icon" href="favicon.ico" />

    <link rel="stylesheet" href="style/stylesheets/basic.css">
    <link rel="stylesheet" href="style/stylesheets/jquery.fullPage.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="style/stylesheets/main.css">

</head>
<body>
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <!--<div class="container-fluid">-->
        <!--<div class="navbar-header">-->
            <!--<a class="navbar-brand" href="#">Brand</a>-->
        <!--</div>-->
        <!--<ul class="nav navbar-nav navbar-right">-->
            <!--<li><a href="#">Link</a></li>-->
            <!--<li><a href="#">Link</a></li>-->
            <!--<li><a href="#">Link</a></li>-->
            <!--<li><a href="#">Link</a></li>-->
            <!--<li><a href="#">Link</a></li>-->

        <!--</ul>s-->
    <!--</div>-->
<!--</nav>-->

<div class="header">
    <div class="container">
        <div class="head_logo_div">
            <img src="images/upload/head.jpg" alt="logo_img">
        </div>
        <ul>
            <li><a href="#page1">Home</a></li>
            <li><a href="#page2">Skill</a></li>
            <li><a href="#page3">Experience</a></li>
            <li><a href="#page4">Hobby</a></li>
            <li><a href="#page5">Contact</a></li>
        </ul>
    </div>
</div>

<div id="xiaohai">
    <div class="section section1">
        <div class="box">
            <div class="cycle_item">
                <div class="cycle-tip">
                    <a class="cycle-label" href="#"><span class="label label-warning glyphicon glyphicon-star">GitHub</span></a>
                </div>
                <div class="cycle-tip">
                    <a class="cycle-label" href="#"><span class="label label-success
glyphicon glyphicon-play-circle">B站信息</span></a>
                </div>
                <div class="cycle-tip">
                    <a class="cycle-label" href="#"><span class="label label-info glyphicon glyphicon-dashboard">个人微博</span></a>
                </div>
                <div class="green_cycle">
                    <img class="green_cycle_img" src="images/icon/green_cycle.svg">

                    <div class="yellow_cycle">
                        <img class="yellow_cycle_img" src="images/icon/yellow_cycle.svg">
                        <div class="blue_cycle">
                            <img class="blue_cycle_img" src="images/icon/blue_cycle.svg">
                            <div class="head_img_div">
                                <img class="head_img" src="images/upload/head.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="section1-content">
                <h1>小海</h1>
                <h2>立于浮华之世,奏响天使之章</h2>
                <div id="box01_text">
                    <p class="box01_p p1">不久前还是个萌新.</p>
                    <p class="box01_p p2">现在还只是一只喜欢动漫和文学的学生党.</p>
                    <p class="box01_p p3">不久以后将是又一个人生迷茫的旅行者.</p>
                </div>
            </div>

            <div class="down-icon">
                <h2 onclick="nextPage()">&#xf103;</h2>
            </div>
        </div>
    </div>



    <div class="section section2">

        <div class="box2">
           <div class="box2-progress">
               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 80%">
                       <div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>HTML5+Css</span>
                           <p>80%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 50%">
                       <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>PS&AE&PR&AI</span>
                           <p>50%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 40%">
                       <div class="progress-bar progress-bar-striped progress-bar-warning active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>Node</span>
                           <p>40%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 20%">
                       <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>绘画</span>
                           <p>20%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 60%">
                       <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>JavaScript</span>
                           <p>60%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 70%">
                       <div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>Unity3D</span>
                           <p>70%</p>
                       </div>

                   </div>
               </div>

               <div class="box2-bar">
                   <div class="progress box2-bar-size" style="width: 30%">
                       <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                           <span>前段工程化</span>
                           <p>30%</p>
                       </div>

                   </div>
               </div>


           </div>

            <div class="box2-content">
                <div class="box02_text">
                    <h1 class="text-skill">About Skill</h1>
                    <div class="overline"></div>
                    <p>2014,第一次接触是C/C++,在拥挤的实验室</p>
                    <p>2014,三月份迷上了视频的制作</p>
                    <p>九月份开始学习到PHP</p>
                    <p>2015,年初的时候摸了摸Unity3D，觉得稀奇有趣</p>
                    <p>剩下的月份我在看JavaWeb</p>
                    <p>2015,接触到node,兴趣开始转到node的自动化</p>
                    <p>上半年熬夜学习</p>
                    <p>下半年开始学习H5,CSS3,JS</p>
                    <p>现在正在学习前端工程化技术</p>
                    <p>喜欢UI,交互设计,觉得UED是我坚持精确1个像素的动力</p>
                    <p>而未来...</p>
                    <p>想成为一名全栈工程师</p>
                </div>
            </div>
        </div>

        <div class="down-icon">
            <h2 onclick="nextPage()">&#xf103;</h2>
        </div>
    </div>



    <div class="section section3">
        <h2 class="hobbly">My Experience</h2>
        <div class="box3">
            <div class="box3-top">
                <div class="row">
                    <div class="col-md-4 express eq1">
                        <h1>2014-Now</h1>
                        <p>吉林大学珠海学院</p>
                        <p>专业：物流与信息管理</p>
                        <p>在风气不佳的考试战场中险些挂科(poi~)</p>
                        <p>最喜欢的科目是LOL<p>
                        <p>现在正在愁于毕业设计</p>
                    </div>
                    <div class="col-md-4 col-md-offset-4 express eq2">
                        <div>
                            <h1>2015.7-2015.8</h1>
                            <p>老爸工厂</p>
                            <p>工人</p>
                            <p>没学到什么东西</p>
                            <p>前途多艰</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box3-bottom">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4 express eq3">
                        <div>
                            <h1>2015.7-2015.8</h1>
                            <p>老爸工厂</p>
                            <p>工人</p>
                            <p>没学到什么东西</p>
                            <p>前途多艰</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="down-icon">
                <h2 onclick="nextPage()">&#xf103;</h2>
            </div>
        </div>

    </div>
    <div class="section section4">
        <h2 class="hobbly">Something Of Hobby</h2>
        <div class="box4">

            <ul>
                <li>
                    <div class="top">
                        <div class="cryimg cry1">
                            <div class="cyc-border">

                            </div>
                            <div class="text">
                                <div class="pos">
                                    <h2 class="solid">视频</h2>
                                    <h2>动漫MAD</h2>
                                </div>
                            </div>
                            <img src="images/upload/kapok.jpg" alt="ss">
                        </div>
                    </div>

                    <div class="hobby_text_div">

                        <p class="about_p">
                            对于视频的热爱一部分来自于对ACG的热爱,小学时就开始就喜欢各种mad酷炫的转场,
                            可惜父母和我都没发现这是个值得培养的爱好,以至于现在发展为一个啥都不会的逗比.
                        </p>
                        <p>
                            比较擅长对治愈系的视频进行自己的制作
                            </a>
                        </p>
                    </div>
                </li>

                <li>
                    <div class="top">
                        <div class="cryimg cry2">
                            <div class="cyc-border">

                            </div>
                            <div class="text">
                                <div class="pos">
                                    <h2 class="solid">ACG</h2>
                                    <h2>动漫&视频&lol</h2>
                                </div>
                            </div>
                            <img src="images/upload/acg.png" alt="ss">
                        </div>
                    </div>

                    <div class="hobby_text_div">

                        <p class="about_p">
                            入宅作《Angle Beats!》,看完《Angle Beats!》深陷泥潭,最喜欢K社的作品(包括Galgame),
                            崇拜麻枝准,喜欢的歌手是ClariS.是个典型的萝莉控重度患者.
                        </p>
                        <p>
                            动漫对我而言是和文学一样的文化,最具感染力的抒情方式,将来希望自己工作在二次元的领域.
                        </p>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <div class="cryimg cry3">
                            <div class="cyc-border">

                            </div>
                            <div class="text">
                                <div class="pos">
                                    <h2 class="solid">文学</h2>
                                    <h2>历史&写作</h2>
                                </div>
                            </div>
                            <img src="images/upload/reading.jpg" alt="ss">
                        </div>
                    </div>

                    <div class="hobby_text_div">

                        <p class="about_p">
                            和大多数人一样曾经也在可当上捧着一本小说看,以前喜欢小四韩寒马尔克斯村上春树,现在的兴趣
                            转移到历史上去了,屌丝只有多读书才能提高自己的内涵.
                        </p>
                        <p>
                            此外也会写点东西,就是毅力不够，仍需磨砺.
                        </p>
                    </div>
                </li>
            </ul>
            <div class="down-icon">
                <h2 onclick="nextPage()">&#xf103;</h2>
            </div>
        </div>
    </div>
    <div class="section section5">5555</div>
</div>




    <script src="js/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="js/jquery.fullPage.js"></script>
    <script src="js/jquery.slimscroll.js"></script>
    <script src="js/move.js"></script>
    <script src="js/velocity.min.js"></script>
    <script src="js/velocity.ui.min.js"></script>


    <script src="js/main.js"></script>


    <script>

    </script>
</body>
</html>